<template lang="html">
	<div class="">
		<table class="table" border="1"  align="center">
		  <tr>
		        <td>序号</td>
		        <td>商品</td>
		        <td>价格</td>
		        <td>数量</td>
		        <td>总价</td>
		        <td>操作</td>
		  </tr>
      <tr v-for="(item,index) in arr">
            <td>{{index}}</td>
            <td>{{item.shop}}</td>
            <td>{{item.price}}</td>
            <td><i class="glyphicon glyphicon-minus" @click="jian(index)"></i>{{item.num}}<i class="glyphicon glyphicon-plus" @click="add(index)"></i>  </td>
            <td>{{item.price*item.num}}</td>
            <td @click="del(index)">删除</td>
      </tr>
      <tr>
        <td>总价</td>
        <td colspan="5">{{totalPrice}}</td>

      </tr>
    </table>
	</div>
</template>
<script>
	export default{
      data(){
          return {
              arr:[
                {shop:"iphone4",price:2000,num:0},
                {shop:"iphone5",price:3000,num:0},
                {shop:"iphone6",price:400,num:0},
                {shop:"iphone7",price:5000,num:0},
                {shop:"iphone8",price:7000,num:1}
              ],
              price_all:0
          }
      },
    methods:{
          jian(index) {
              if(this.arr[index].num>0){
                this.arr[index].num--
              }else{
                  return
              }
          },
          add (index) {
            this.arr[index].num++

          },
          del(index){
              console.log(index)
              this.arr.splice(index,1)
          }
    },
    computed:{
        totalPrice:function(){
            let total = 0;
            this.arr.forEach(function(item){
              total += item.price * item.num;
            })
            return total;
        },
    }

	}
</script>
<style scoped="">
  i{
    color:#ccc;
    border-radius:50%;
    font-weight: normal;
    margin: 0 20px;
  }
  td:hover{
    background-color: #eee;
  }
</style>
